<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
	<link rel="stylesheet" href="css/jquery.scroller-1.0rc2.min.css" />
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.scroller-1.0rc2.min.js"></script>
</head> 
<body> 
	<script type="text/javascript">
        $(document).ready(function () {
            $('#date1').scroller();
            $('#date2').scroller({ preset: 'datetime' });
            $('#date3').scroller({ preset: 'datetime', seconds: true,
                ampm : false,
                theme: 'sense-ui'
            });
            wheels = [];
            wheels[0] = { 'Hours': {} };
            wheels[1] = { 'Minutes': {} };
            for (var i = 0; i < 60; i++) {
                if (i < 16) wheels[0]['Hours'][i] = (i < 10) ? ('0' + i) : i;
                wheels[1]['Minutes'][i] = (i < 10) ? ('0' + i) : i;
            }
            $('#custom').scroller({
                width: 90,
                wheels: wheels,
                formatResult: function (d) {
                    return ((d[0] - 0) + ((d[1] - 0) / 60)).toFixed(1);
                },
                parseValue: function (s) {
                    var d = s.split('.');
                    d[0] = d[0] - 0;
                    d[1] = d[1] ? ((('0.' + d[1]) - 0) * 60) : 0;
                    return d;
                }
            });
            $('#disable').click(function() {
                if ($('#date2').scroller('isDisabled')) {
                    $('#date2').scroller('enable');
                    $(this).text('Disable');
                }
                else {
                    $('#date2').scroller('disable');
                    $(this).text('Enable');
                }
                return false;
            });

            $('#get').click(function() {
                alert($('#date2').scroller('getDate'));
                return false;
            });

            $('#set').click(function() {
                $('#date2').scroller('setDate', new Date(), true);
                return false;
            });
        });
    </script>
<div data-role="page">

	<div data-role="header">
		<h1>Plan Trip</h1>
	</div><!-- /header -->

	<div data-role="content">
		<div data-role="fieldcontain">
			<label for="select-choice-1" class="select">Start:</label>
			<a href="startaddress.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Start</a>
			<label for="select-choice-1" class="select">End:</label>
			<a href="endaddress.html" data-role="button" data-icon="arrow-r" data-iconpos="right">End</a>
       	 	<label for="select-choice-1" class="select">Date:</label>
			<input type="text" name="date1" id="date1" class="genField textEntry date" readonly="readonly" value="12/08/2010" />
			<label for="select-choice-1" class="select">Choose timing:</label>
			<select name="select-choice-1" id="select-choice-1">
				<option value="departure">Departure Time</option>
				<option value="arrival">Arrival Time</option>
			</select>
		</div>
	</div><!-- /content -->


	<a href="nearby.html" data-role="button" data-icon="grid">Nearby</a>
	<a href="news.html" data-role="button" data-icon="grid">News</a>
	<a href="plantrip.html" data-role="button" data-icon="grid">Plan Trip</a>
	<a href="bookmarks.html" data-role="button" data-icon="grid">Bookmarks</a>
		<div data-role="footer">

	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>
